<template>
	<uni-popup ref="popup">
		<view class="popup-content">
			<image class="bj" mode="widthFix" :src="bj"></image>
			<view class="content">
				<image class="text-img" mode="widthFix" :src="icon2"></image>
				<view class="presenter">
					<image class="bj2" mode="widthFix" :src="bj2"></image>
					<view class="line">
						<image mode="widthFix" :src="icon1"></image>
						<text class="text">
							充值{{info.price}}元，到账<text>{{info.forever_coin}}</text>永久金币
							再奖励 1、<text>{{info.give_coin}}</text>赠送金币 
							2、<text>{{info.vip_day}}</text>天会员权限
							<template v-if="info.watch_limit">
							3、（任意一部剧<text>前{{info.watch_limit}}集</text>）免费观看券
							</template>
							<!-- 4、奖励<text>5元</text>充值券 -->
						</text>
					</view>
				</view>
				<view class="list">
					<view class="item" v-for="(item, index) in video" :key="index">
						<image :src="item.img"></image>
						<view class="text">
							{{ item.name }}
						</view>
					</view>
				</view>
				<view class="button" @click="topUp">
					去充值
				</view>
			</view>
			<view class="close">
				<image @click="close" mode="widthFix" src="@/static/close.png"></image>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		props: ['baseUrl', 'video'],
		data() {
			return {
				bj: this.configs.webUrl + '/img/Top-up-the-gift-packagebj.png',
				bj2: this.configs.webUrl + '/img/Top-up-the-gift-packagebj2.png',
				icon1: this.configs.webUrl + '/img/Top-up-the-gift-package1.png',
				icon2: this.configs.webUrl + '/img/Top-up-the-gift-package2.png',
				info: {}
			}
		},
		methods: {
			firstRechargeActiveInfo() {
				uni.request({
					url: this.configs.webUrl + '//api/virtual_payment/firstRechargeActiveInfo',
					success: (res) => {
						console.log(res);
						this.info = res.data.data
					}
				})
			},
			open() {
				this.$refs.popup.open()
				this.firstRechargeActiveInfo()
			},
			topUp() {
				var that = this
				wx.login({
					success(res) {
						if (res.code) {
							//发起网络请求
							uni.request({
								url: that.configs.webUrl + '/api/virtual_payment/getPayOrder',
								method: 'GET',
								data: {
									token: uni.getStorageSync("userinfo").token, //你的小程序的secret,  
									code: res.code, //wx.login 登录成功后的code  
									buy_num: that.info.price,
									forever_coin: that.info.forever_coin,
									normal_coin: that.info.give_coin,
									is_new_user_recharge: 1
								},
								success: (cts) => {
									var pay_res = cts.data;
									if (pay_res.code == 200) {
										wx.requestVirtualPayment({
											signData: JSON.stringify({
												offerId: pay_res.data.signData.offerId,
												buyQuantity: pay_res.data.signData
													.buyQuantity,
												env: pay_res.data.signData.env,
												currencyType: 'CNY',
												platform: pay_res.data.signData
													.platform,
												productId: pay_res.data.signData
													.productId,
												goodsPrice: pay_res.data.signData
													.goodsPrice,
												outTradeNo: pay_res.data.signData
													.outTradeNo,
												attach: pay_res.data.signData.attach,
											}),
											paySig: pay_res.data.pay_sing,
											signature: pay_res.data.signature,
											mode: 'short_series_coin',
											success(res_msg) {
												console.log('requestVirtualPayment success',
													res_msg)
												uni.request({
													url: that.configs.webUrl +
														'/api/virtual_payment/rechargePaySuccess',
													method: 'POST',
													data: {
														token: uni.getStorageSync(
															"userinfo")
														.token, //你的小程序的secret,  
														trade_no: pay_res.data.signData
															.outTradeNo,
														pay_sing: pay_res.data
															.pay_sing,
														signature: pay_res.data
															.signature
													},
													success: (cts) => {
														console.log(99999999999,
															'支付成功');
														uni.navigateBack()
													},
													fail: (err1) => {
														console.log(err1);
														//失败的回调
													}
												})
											},
											fail({
												errMsg,
												errCode
											}) {
												console.error(errMsg, errCode)
											},
										})
									}
								},
								fail: (err1) => {
									console.log(err1);
									//失败的回调
								}
							});
				
						} else {
							console.log('登录失败！' + res.errMsg)
							uni.showToast({
								title: res.errMsg,
								icon: "none"
							});
						}
					}
				})
			},
			close() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-content {
		width: 100vw;
		position: relative;

		.bj {
			width: 100%;
		}

		.content {
			position: absolute;
			top: 29%;
			left: 7%;
			width: 86%;

			.text-img {
				width: 90%;
				margin-left: 5%;
			}

			.presenter {
				margin-top: 10rpx;
				position: relative;
				z-index: 10;

				.bj2 {
					width: 100%;
					position: absolute;
					z-index: -1;
				}

				.line {
					display: flex;
					align-items: center;
					flex-direction: revert;
					padding-top: 10rpx;

					image {
						width: 180rpx;
					}

					.text {
						width: calc(100% - 240rpx);
						display: block;
						font-size: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #BE7572;

						text {
							font-size: 20rpx;
							color: #F85A55;
						}
					}
				}
			}

			.list {
				display: flex;
				justify-content: space-between;
				flex-direction: revert;
				margin: 20rpx auto;
				width: 90%;

				.item {
					border: 4px solid #e8d6b1;
					border-radius: 16rpx;
					overflow: hidden;
					position: relative;

					image {
						width: 167rpx;
						height: 244rpx;
					}

					.text {
						position: absolute;
						bottom: 0;
						width: 100%;
						background: rgba(0, 0, 0, 0.6);
						font-size: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						text-align: center;
						height: 40rpx;
						line-height: 40rpx;
					}
				}
			}

			.button {
				height: 96rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: revert;
				background: linear-gradient(90deg, #F75581 0%, #C860FF 100%);
				border-radius: 60rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}

		.close {
			width: 100%;
			margin-top: 20rpx;
			display: flex;
			justify-content: center;
			flex-direction: revert;

			image {
				width: 72rpx;
			}
		}
	}
</style>